@charset "UTF-8";
@import "./element/index.scss";
@import "./iconfont/index.css";

:root:not([theme-mode=dark]) {
  // 重置主色调 start
  --yh-brand-color-1: #ecf2fe;
  --yh-brand-color-2: #d4e3fc;
  --yh-brand-color-3: #bbd3fb;
  --yh-brand-color-4: #96bbf8;
  --yh-brand-color-5: #699ef5;
  --yh-brand-color-6: #4787f0;
  --yh-brand-color-7: #266fe8;
  --yh-brand-color: #0052d9;
  --yh-brand-color-9: #0034b5;
  --yh-brand-color-10: #001f97;
  // 重置主色调 end
  --border-radius: 3px;
  --dd-color-content: #86909c;
  --dd-font-gray-1: rgba(0, 0, 0, .8);
  --dd-scrollbar-color: rgba(0, 0, 0, .1);
  --dd-scroll-track-color: #fff;
  --dd-color-secondary-brand: rgb(99, 133, 166);

  .headers-root {
    --header-logo-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
      rgba(255, 255, 255, 0.2) 1px 3px 3px;
    --header-bottom-color: #dcdfe6;
    --yh-shoadow-bootom: 0 2px 3px rgba(0, 0, 0, 0.05);

  }

  .actionTheme {
    --bg-color-tab-select: #fff;
    --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
    --anim-duration-moderate: .24s;
    --text-disabled: rgba(0, 0, 0, .26);
    --bg-color-component: #eee;

  }

  .detail-root {
    --bages-bg: var(--yh-gray-color-5);
    --bages-color: var(--yh-font-white-1);

  }

   //容器的变量
   .box-variable {
    --gb-container-hover:#f9f9f9;
  }
}

:root[theme-mode=dark] {
  --yh-brand-color-1: #1b2f51;
  --yh-brand-color-2: #173463;
  --yh-brand-color-3: #143975;
  --yh-brand-color-4: #103d88;
  --yh-brand-color-5: #0d429a;
  --yh-brand-color-6: #054bbe;
  --yh-brand-color-7: #2667d4;
  --yh-brand-color: #4582e6;
  --yh-brand-color-9: #699ef5;
  --yh-brand-color-10: #96bbf8;

  --dd-color-content: var(--yh-gray-color-9);
  --dd-font-gray-1: var(--yh-font-white-2);

  --dd-scrollbar-color: rgba(255, 255, 255, .1);
  --dd-scroll-track-color: #333;
  --dd-color-secondary-brand: #819ece;

  .headers-root {
    --header-logo-shadow: rgba(0, 0, 0, 0.5) 0 5px 6px,
      rgba(0, 0, 0, 0.2) 1px 3px 3px;
    --header-bottom-color: #666666;
    --yh-shoadow-bootom: var(--yh-shadow-1);

  }

  .actionTheme-root {
    --bg-color-tab-select: #4b4b4b;
    --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
    --anim-duration-moderate: .24s;
    --text-disabled: rgba(255, 255, 255, .22);
    --bg-color-component: #383838;
  }

  .detail-root {
    --bages-bg: var(--yh-gray-color-11);
    --bages-color: var(--yh-gray-color-5);
  }
  //容器的变量
  .box-variable {
    --gb-container-hover: var(--yh-gray-color-12);
  }
}



/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*滚动条的轨道*/
::-webkit-scrollbar-track {
  background-color: var(--dd-scroll-track-color);
}

/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: var(--dd-scrollbar-color);
  transition: all .2s ease-in-out;
}




html {
  // width: 100%;
  min-height: 100%;
  // overflow: hidden;
  // background-color: var(--yh-bg-color-secondarycontainer);
  background-color: var(--yh-gray-color-1);
}

html[theme-mode=dark] {
  background-color: var(--yh-gray-color-14);
}

body {
  // width: 100%;
  // height: 100%;
  // // overflow-y: auto;
  // overflow-y: overlay;
  // position: relative;
  // z-index: 0;

}

.dark {
  ::-webkit-scrollbar-track {
    background-color: var(--yh-bg-color-secondarycontainer);
  }

  /*滚动条的滑块按钮*/
  ::-webkit-scrollbar-thumb {
    background-color: var(--dd-scroll-track-color);
  }
}

#app {
  width: 100%;
  min-height: 100%;
  // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;


}
.light{
  #app{
    background: url("../../assets/img/bg.jpeg") no-repeat;
  }
  .headers{
    // background-image: radial-gradient(transparent 1px,#ffffff 1px) !important;
    // background-size: 4px 4px !important;
    // backdrop-filter: saturate(50%) blur(4px) !important;
    backdrop-filter:blur(8px) !important;
    background: transparent !important;
  }
}


// 主要容器背景
.container-bg {
  background: var(--yh-bg-color-container);
}

.box-shadow-0 {
  box-shadow: var(--yh-shadow);
}

//文章管理页面  content内容
.gaobug {
  max-width: 1200px;
  padding: $header-top 16px 16px;
  margin: auto;
  min-height: 100vh;
  position: relative;
}

.gaobug-contents {
  height: $content-height;
  width: 100%;
}


.emoji {
  display: inline;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  vertical-align: sub;
}


@media screen and (min-width:960px) {
  .medium-screen-hide {
    display: none;
  }

}

@media screen and (max-width:960px) {
  $header-top: 66px;

  .gaobug {
    padding: $header-top 0 0 0;
  }

  //960以下要消失的元素
  .small-screen-hide {
    display: none;
  }

  .yh-button.yh-button--size-medium {
    height: 28px;
    line-height: 26px;
    padding: 0 12px;
  }

}


/* 页面切换动画-s */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}

// slide-right
.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

// slide-left
.slide-left-enter-from {
  @extend .slide-right-leave-to;
}

.slide-left-leave-to {
  @extend .slide-right-enter-from;
}